<!--
 * @Description: 
 * @Version: 0.0
 * @Author: taosong
 * @Date: 2023-03-24 21:07:03
 * @LastEditors: taosong
 * @LastEditTime: 2023-03-25 14:42:05
-->
<template>
  <div>
    <m-form :formOptions="formOptions">
      <template #action="{ model, modelForm }">
        <Button
          type="primary"
          @click="handleSubmit({ model, modelForm })"
          >Submit</Button
        >
        <Button
          @click="handleReset({ model, modelForm })"
          style="margin-left: 8px"
          >Reset</Button
        >
      </template>
    </m-form>
  </div>
</template>

<script setup lang="ts">
import { FormOptions } from '../../components/form/src/types'
import { Message } from 'view-ui-plus'

const formOptions: FormOptions[] = [
  {
    type: 'input',
    value: '',
    label: '用户名',
    prop: 'username',
    placeholder: '请输入用户名',
    rules: [
      {
        required: true,
        message: '请输入用户名',
        trigger: 'blur'
      },
      {
        min: 5,
        max: 10,
        message: '长度在5-10之间',
        trigger: 'blur'
      }
    ],
    attrs: {
      style: {
        width: '500px'
      },
      clearable: true
    }
  },
  {
    type: 'radioGroup',
    prop: 'gender',
    value: '',
    label: '性别',
    placeholder: '请选择性别',
    rules: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change'
      }
    ],
    children: [
      {
        type: 'radio',
        label: '男'
      },
      {
        type: 'radio',
        label: '女'
      }
    ]
  },
  {
    type: 'select',
    prop: 'city',
    value: '',
    label: '城市',
    placeholder: '请选择城市',
    rules: [
      {
        required: true,
        message: '请选择城市',
        trigger: 'change'
      }
    ],
    children: [
      {
        type: 'option',
        label: '北京',
        value: '北京'
      },
      {
        type: 'option',
        label: '上海',
        value: '上海'
      },
      {
        type: 'option',
        label: '广州',
        value: '广州'
      },
      {
        type: 'option',
        label: '深圳',
        value: '深圳'
      }
    ],
    attrs: {
      clearable: true
    }
  },
  {
    type: 'checkboxGroup',
    prop: 'hobby',
    value: [],
    label: '爱好',
    placeholder: '请选择爱好',
    rules: [
      {
        required: true,
        message: '请选择爱好',
        trigger: 'change',
        type: 'array'
      }
    ],
    children: [
      {
        type: 'checkbox',
        label: '篮球'
      },
      {
        type: 'checkbox',
        label: '足球'
      },
      {
        type: 'checkbox',
        label: '排球'
      },
      {
        type: 'checkbox',
        label: '乒乓球'
      }
    ]
  },
  {
    type: 'datePicker',
    value: '',
    label: '日期',
    prop: 'daterange',
    placeholder: '请选择日期',
    rules: [
      {
        required: true,
        message: '请选择日期',
        trigger: 'change',
        type: 'array'
      }
    ]
  }
]

// 表单提交
const handleSubmit = (scope: any) => {
  const { modelForm } = scope
  modelForm.validate((valid: boolean) => {
    if (valid) {
      Message.success('验证成功')
    } else {
      Message.error('请填写必填字段')
    }
  })
}

// 表单重置
const handleReset = (scope: any) => {
  const { modelForm } = scope
  modelForm.resetFields()
}
</script>

<style scoped></style>
